<script setup>
import { changeOrderStateFn, getOrderListDataFn } from '@/api/wzhApi';
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const active = ref(0)
const titles = ["全部", "待装车", "运输中", "待付款", "已完成"]

// 获取订单数据
const type = ref('全部')
const orderList = ref()
getOrderListDataFn({ userid: 10086, type: type.value }).then(res => {
	// console.log('订单数据', res);
	orderList.value = res.data.order
})
function changeClick(num) {
	// console.log(111);

	type.value = titles[num]
	getOrderListDataFn({ userid: 10086, type: type.value }).then(res => {
		// console.log('切换后的订单数据', res);
		orderList.value = res.data.order
	})
}
// 跳转详情
function godetail(data) {
	router.push({
		path: '/orderdetail',
		query: {
			data
		}
	})
}
// 改变状态
function changeStateClick(orderNum, orderState) {
	changeOrderStateFn({ orderNum, orderState }).then(res => {

		console.log('改变状态', res);
		getOrderListDataFn({ userid: 10086, type: type.value }).then(res => {
			// console.log('订单数据', res);
			orderList.value = res.data.order

		})
	})
}
</script>
<template>
	<div class="header">
		<span @click="$router.back()" class="back">
			<van-icon name="arrow-left" />
		</span>
		<span>我的订单</span>

	</div>
	<div class="main">
		<van-tabs v-model:active="active" @click-tab="changeClick(active)">
			<van-tab v-for="item in 5" :key="item" :title="titles[item - 1]">
				<div class="model" v-for="item in orderList" :key="item.orderNum">
					<div @click="godetail(item.orderNum)">
						<div class="top">
							<span>运单号:2023121204</span><span>2023-12-12 04:00</span>
						</div>
						<div class="center">
							<div><span>石家庄</span><img src="/imgs/u10.svg" alt=""><span>北京</span></div>
							<span style="color:red;">￥ 1000.00</span>
						</div>
						<div class="bottom">
							<span>装车时间:2023.12.12</span>
							<span>货物信息:蔬菜/10吨/100方</span>
							<span>车辆信息:冀A00001/平板/4.2米/整车</span>
						</div>
					</div>

					<div class="btn" v-if="item.orderState == '待装车'">
						<van-button @click="changeStateClick(item.orderNum, item.orderState)">完成装车</van-button>
						<van-button>撤单</van-button>
					</div>
					<div class="btn" v-else-if="item.orderState == '运输中'">
						<van-button @click="changeStateClick(item.orderNum, item.orderState)">完成卸货</van-button>

					</div>
					<div class="btn" v-else-if="item.orderState == '待付款'">
						<van-button disabled>等待付款</van-button>

					</div>
					<div class="btn" v-else-if="item.orderState == '已完成'">
						<van-button disabled>已完成</van-button>
					</div>
				</div>
			</van-tab>

		</van-tabs>

	</div>

</template>
<style lang="scss" scoped>
.header {
	height: 0.6rem;
	background-color: #1678ff;
	font-size: 0.2rem;
	color: white;
	display: flex;
	align-items: flex-end;

	padding: 0 0.1rem 0.1rem 0.1rem;
	justify-content: center;
	box-sizing: border-box;
	position: relative;

	.back {
		position: absolute;
		left: 0.1rem;
	}
}

.main {
	background-color: #f2f2f2;
	height: calc(100% - 0.6rem);
}


.model {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 90%;
	height: 2rem;
	margin: 0.1rem 5%;
	background-color: white;
	border-radius: 0.1rem;
	padding: 0.1rem 0.2rem;
	box-sizing: border-box;

	.top {
		display: flex;
		justify-content: space-between;
		border-bottom: 0.01rem solid rgb(223, 223, 223);
	}

	.center {
		font-weight: 500;
		font-style: normal;
		font-size: 16px;
		display: flex;
		justify-content: space-between;

		img {
			margin: 0 10px;
			width: 0.15rem;
			height: 0.08rem;
		}
	}

	.bottom {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 0.7rem;
		color: gray;
	}

	.btn {
		display: flex;
		justify-content: end;

		.van-button {
			height: 0.3rem;
			border-radius: 0.2rem;
			margin-right: 0.1rem;
			color: #1678ff;
			border: 1px solid #1678ff;
		}
	}
}
</style>